 <template>
 	<view class="body_css">
 		<view v-for="(e, i) in colors" :key="e" class="color_li" :class="i === colors.length - 1 ? 'mr0' : 'mr8'">
 			<view :style="{ background: e,
          width:
            Math.floor(ratio * 10) >= i + 1
              ? '100%'
              : Math.ceil( ratio * 10) - 1 === i ? `${(ratio * 10 - Math.floor(ratio * 10)) * 100}%` : '0',
        }" />
 		</view>
 	</view>
 </template>


 <script>
 	export default {
 		props: {
 			ratio: {
 				type: Number,
 				default: 0,
 			},
 		},
 		data() {
 			return {
 				colors: [
 					'#FFE6E6',
 					'#FFCCCC',
 					'#FFB3B3',
 					'#FF9999',
 					'#FF8080',
 					'#FF6666',
 					'#FF4D4D',
 					'#FF3333',
 					'#FF1A1A',
 					'#FF0000',
 				]
 			}
 		}
 	}
 </script>

 <style scoped>
 	.body_css {
 		width: 472rpx;
 		display: flex;
 	}

 	.color_li {
 		width: 40rpx;
 		height: 40rpx;
 		background-color: #f4f4f4;
 	}

 	.color_li view {
 		height: 100%;
 	}

 	.mr0 {
 		margin-right: 0;
 	}

 	.mr8 {
 		margin-right: 8rpx;
 	}
 </style>